<template>
  <div id="content">
    <!-- 搜索框开始 -->
    <van-search
      v-model="keyword"
      show-action
      shape="round"
      disabled
      placeholder="搜索食谱、用户等"
      @click="$router.push('popu')"
    >
      <!-- 上面进行了遮罩层的路由跳转 -->
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <!-- 搜索框结束 -->
    <!-- 轮播图开始 -->
    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="#fc5566">
      <van-swipe-item v-for="item in imglist" :key="item.index">
        <router-link :to="item.to">
          <img v-lazy="item.img" width="100%" display="block" />
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图结束 -->
    <!-- 九宫格开始 -->
    <van-grid class="gird" :gutter="5" :border="false" column-num="5">
      <van-grid-item
        v-for="(item, index) in gridtextlist"
        :key="index"
        :text="item.text"
        :icon="item.photo"
        :to="item.to"
      />
    </van-grid>
    <!-- 九宫格结束 -->
    <!-- 热门活动开始 :loop="false"-->
    <p class="hot">热门美食</p>
    <van-swipe class="my-swipe2" :autoplay="4000" indicator-color="#fff">
      <van-swipe-item v-for="item in imglist2" :key="item.index">
        <router-link :to="item.to">
          <img v-lazy="item.img" width="100%" display="block" />
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <!-- 热门活动结束 -->
    <!-- 今日推荐开始 -->
    <p class="today">今日推荐</p>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- /details/${details}路由先转的联机 -->
        <router-link :to="('/detail')">
          <van-cell v-for="item in datalist" :key="item.id">
            <img v-lazy="item.name" alt="" class="ig" />
            <span class="user">{{ item.user_name }}</span>
            <div class="prc">
              <span>{{ item.title }}</span>
              <img v-lazy="item.image" alt="" />
            </div>
          </van-cell>
        </router-link>
      </van-list>
    </van-pull-refresh>
    <!-- 今日推荐结束 -->

    <!-- 占位符 -->
    <transition name="van-fade">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import Vue from "vue";
import { GridItem, Lazyload } from "vant"; //首页图片实现懒加载
Vue.use(Lazyload);
export default {
  name: "tabbar",
  data() {
    return {
      keyword: "", //搜索框的变量
      //轮播图数组
      imglist: [
        {
          to: "/",
          img: require("../assets/1.png"),
        },
        {
          to: "",
          img: require("../assets/6.png"),
        },
        {
          to: "",
          img: require("../assets/3.png"),
        },
        {
          to: "",
          img: require("../assets/4.png"),
        },
        {
          to: "",
          img: require("../assets/5.png"),
        },
        {
          to: "",
          img: require("../assets/2.png"),
        },
      ],
      imglist2:[
        {
          to:"",
          img:require("../assets/01.jpg")
        },
        {
          to:"",
          img:require("../assets/02.jpg")
        },
        {
          to:"",
          img:require("../assets/03.jpg")
        },
      ],
      //九宫格的数组
      gridtextlist: [
        {
          text: "菜谱分类",
          icon: "c",
          photo: require("../assets/icon/8.png"),
          to: "/details",
        },
        {
          text: "精品特卖",
          icon: "p",
          photo: require("../assets/icon/17.png"),
          to: "/login", //精品特卖
        },
        {
          text: "活跃达人",
          icon: "j",
          photo: require("../assets/icon/3.png"),
          to: "/",
        },
        {
          text: "母婴专区",
          icon: "g",
          photo: require("../assets/icon/13.png"),
          to: "/mater",
        },
        {
          text: "关注动态",
          icon: "h",
          photo: require("../assets/icon/15.png"),
          to: "/",
        },
        {
          text: "签到领钱",
          icon: "template",
          photo: require("../assets/icon/6.png"),
          to: "/",
        },
        {
          text: "视屏菜谱",
          icon: "scoped",
          photo: require("../assets/icon/7.png"),
          to: "",
        },
        {
          text: "安佳美食",
          icon: "sh",
          photo: require("../assets/icon/14.png"),
          to: "",
        },
        {
          text: "热门学做",
          icon: "sh",
          photo: require("../assets/icon/12.png"),
          to: "",
        },
        {
          text: "健康管理",
          icon: "sh",
          photo: require("../assets/icon/18.png"),
          to: "/HealthManagement",
        },
      ],
      datalist: [], //今日推荐的数组
      refreshing: false,
      loading: false,
      finished: false,
      current: 1, //记录第几页
      total: 0, //记录全部的数据
    };
  },
  methods: {
    router() {
      this.$router.push("/about");
    },
    onLoad(cid, current) {
      /**
       * 1.axios请求页面
       * 2.合并新数据到老数据下面
       * 3.让this.loading=false
       * 4.判断请求到的所有，数据是否等于总数，停止加载，给this.finished=true
       */
      let object = {
        cid: cid,
        current: current,
      };
      // if(this.data.results.length===this.total){
      //   this.finished=true;
      //   return;
      // }
      this.current++;
      // 异步更新数据
      // setTimeout真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.axios.get("/index", this.qs.stringify(object)).then((res) => {
          let data = res.data.results;
          data.forEach((item) => {
            item.name = require("../assets/portrait/" + item.image); //用户头像
            item.image = require("../assets/image/" + item.user_portrait); //菜谱图片
            this.datalist.push(item);
          });
        });
        if (this.refreshing) {
          this.datalist = []; //清空数据
          this.refreshing = false; //停止加载
        }
        //  for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.datalist.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>
<style >
.my-swipe .van-swipe-item {
  display: block;
  /* width: 100%; */
  height: 245px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.van-grid-item__content {
  padding: 14px 8px !important;
}
.van-grid-item__text {
  font-size: 13px !important;
  font-family: "微软雅黑" !important;
}
.van-icon__image {
  width: 35px !important;
  height: 35px !important;
}
.tabbar {
  font-size: 14px;
}
/*热门活动 */
.hot{
  text-align: center;
  margin: 5px;
  font-size: 18px;
  color: #3d2222;
  font-weight: bold;
  margin-bottom: 10px;
  font-family: "微软雅黑";
}
/* 今日推荐 */
.van-cell {
  position: absolute;
}
.today {
  margin: 10px;
  font-size: 18px;
  font-family: "微软雅黑";
  font-weight: bold;
  text-align: center;
  color: #3d2222;
}
.ig {
  width: 60px;
  height: 60px;
}
.user {
  position: relative;
  margin: 20px;
  top: -30px;
  font-size: 16px;
}
.prc span {
  margin: 10px 10px;
  font-size: 20px;
}
.prc img {
  position: relative;
  top: 10px;
  border-radius: 15px;
  width: 100%;
}
.my-swipe2{
  height: 200px;
}
</style>
